<template>
    <div>
        <nav>
            <h1>电商后台管理系统</h1>
            <div class="inp"> <i class="el-icon-user-solid"></i><input
                    type="text"
                    v-model="name"
                    @input="jy"
                    placeholder="请输入用户名"
                >
                <p v-show="show">您输入的用户名格式不正确</p>
            </div>

            <div class="inp"><i class="el-icon-lock"></i> <input
                    type="password"
                    v-model="password"
                    @input="jy"
                    placeholder="请输入密码"
                >
                <p v-show="show1">您输入的密码格式不正确</p>
            </div>
            <aside>
                <el-button
                    type="primary"
                    @click="add"
                >登录</el-button>
                <el-button type="info">重置</el-button>
            </aside>
        </nav>
    </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      password: "",
      show: false,
      show1: false
    };
  },
  mounted() {},
  methods: {
    //   账号密码正则校验
    jy() {
      let zz = /^[a-z]{4,16}$/;

      if (!zz.test(this.name)) {
        this.show = true;
      } else {
        this.show = false;
      }
      if (this.password.length < 5) {
        this.show1 = true;
      } else {
        this.show1 = false;
      }
    },
    // 登录
    add() {
      // 非空判断
      if (this.name == "" || this.password == "") {
        alert("用户名或密码不能为空");
      }
      //   请求登录接口
      this.$axios
        .post("http://www.ysqorz.top:8888/api/private/v1/login/")
        .then(res => {
          console.log(res, 111);
        });
    }
  }
};
</script>

<style scoped >
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

nav {
  width: 600px;
  height: 350px;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 75%);
  text-align: center;
}
.inp {
  width: 70%;
  height: 35px;
  border: 1px solid;
  margin: auto;
  margin-top: 20px;
}
input {
  width: 90%;
  height: 30px;
  border: none;
  outline: none;
}
aside {
  margin-top: 20px;
}
h1 {
  margin: 15px 0;
}
p {
  font-size: 14px;
  color: gray;
}
</style>
